<template>
	<view class="content">
		<view>
			<view class="titleStyle">代理商申请</view>
			<view>
				<form @submit="formSubmit">
					<view class="card">
						<view class="items">
							<view class="items_title">代理城市</view>
							<view style="display: flex;gap: 20rpx;">
								<input type="" placeholder="请选择您要代理的城市" v-model="city" name="city" />
								<view class="items_title">
									<text class="iconfont icon-weizhi" @tap="getCity"></text>
									定位
								</view>
							</view>
						</view>
						<view class="items">
							<view class="items_title">联系人</view>
							<view>
								<input type="" placeholder="请输入联系人姓名" v-model="name" name="name" />
							</view>
						</view>
						<view class="items">
							<view class="items_title">手机号</view>
							<view>
								<input  placeholder="请输入联系人姓名" v-model="phone" name="phone" />
							</view>
						</view>
					</view>
					<view class="card">
							<view>备注 (选填)</view>
							<view style="width: 100%;">
								<textarea v-model="notes" class="notesWrapper" placeholder="请填写申请愿意,100字以内">
									
								</textarea>
							</view>
						</view>
					<view>
						<button form-type="submit" class="subBtn">提交申请</button>
					</view>
				</form>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				phone: "",
				city:"",
				notes:"",
				submitData:{}
			}
		},
		methods: {
			//获取城市位置信息
			async getCity(){
				const data = await this.$http('/appapi/member/get_address');
				console.log(data)
				this.city=data.city
			},
			formSubmit(e) {
				let name = e.detail.value.name
				let phone = e.detail.value.phone
				let city = e.detail.value.city
				//非空校验
				let err = ""

				if (name == "") {
					err = "姓名不为空"
				}
				if (phone == "") {
					err = "电话号码不为空"
				}
				if (city == "") {
					err = "代理城市不为空"
				}
				if (err) {
					uni.showToast({
						title: err,
						icon: "none",
						duration: 2000
					})
					return
				}

				//发起请求
				console.log("发起请求")
				console.log(e)
				let data = {
					name: name,
					phone: phone,
					city: city
				}
				this.submitData = data
				this.submitFeedback()
				console.log(data)
			},
			submitFeedback() {
				var that = this
				let data = this.submitData
				data.remark=this.notes
				//console.log(res2.tempFilePath)
				console.log("提交的数据为:", data)

				uni.request({
					url:"https://qw.lvd8.cn/appapi/Index/intention_proxy",
					data: {
						...data
					},
					success: function(res) {
						//uni.hideLoading()
						console.log("请求成功")
						console.log(res)
						uni.showToast({
							title:"请求成功",
						})
					}
				})
				
				// uni.uploadFile({
				// 	url: 'https://qw.lvd8.cn/appapi/Index/intention',
				// 	filePath: that.image_url[index],
				// 	name: 'img',
				// 	header: {
				// 		'Content-Type': 'multipart/form-data'
				// 	},
				// 	formData: {
				// 		...data
				// 		//text:"hello"
				// 	},
				// 	success: function(res) {
				// 		console.log("提交成功", res)
				// 		console.log(`第${index+1}张上传成功`, res)
				// 		index++
				// 		//新建跳转
				// 		if (index == that.image_url.length) {
				// 			uni.showToast({
				// 				title: '提交成功',
				// 				icon: 'success',
				// 				duration: 2000,
				// 				success() {
				// 					//清空处理
				// 					that.image_url = []
				// 					that.name = ""
				// 					that.phone = ""
				// 				}
				// 			});
				// 			return
				// 		}
				// 		that.submitFeedback(index)
				// 	},
				// 	fail(err) {
				// 		console.log("请求失败", err)
				// 		uni.showToast({
				// 			title: '提交异常',
				// 			icon: 'error',
				// 			duration: 2000,
				// 		});
				// 	}
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.items_title{
		white-space: nowrap;
	}
	.notesWrapper{
		width: 100%;
		background-color: #EDF7F5;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx 0;
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 100vh;
		padding: 20rpx 0;
		background-color: #F5F5F5;
	}

	.card {
		box-sizing: border-box;
		border-radius: 20rpx;
		padding: 40rpx;
		background-color: #fff;
		width: 95%;
		margin: 30rpx auto;
	}

	.items {
		border-bottom: 1px solid #EAE8E8;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;

		input {
			text-align: right;
		}
	}


	.subBtn {
		width: 90%;
		background-color: #FF2C5C;
		color: #fff;
		margin: auto;
		border-radius: 20rpx;
		padding: 15rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.titleStyle {
		background-color: #FA97B4;
		font-size: 30rpx;
		text-align: center;
		padding: 10rpx;
		color: #fff;
	}

	/* 图片 */
	.imgBox {
		display: flex;
		flex-wrap: wrap;
		/* 		justify-content: space-around; */
	}

	.addImgWrapper {
		width: 200rpx;
	}

	.imgBox::after {
		content: "";
		flex: auto;
	}

	.addImgWrapper image {
		margin: 5rpx 15rpx;
		width: 150rpx;
		height: 150rpx;
	}

	.imgBox .upImg {
		width: 150rpx;
		height: 150rpx;
		margin: 5rpx 15rpx;
		border-radius: 30rpx;

		image {
			width: 150rpx;
			height: 150rpx;
		}
	}

	.upImgBox {
		position: relative;
	}

	.upImgBoxClose {
		position: absolute;
		height: 30px;
		width: 30px;
		top: 0;
		right: 0;
		z-index: 200;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}
	
	.titleStyle {
		background-color: #FA97B4;
		font-size: 30rpx;
		text-align: center;
		padding: 10rpx;
		color: #fff;
	}
	
</style>